<template>
  <view class="container">
   <!-- 地图区域 -->
      <view class="map-container">
        <image 
          :src="currentMap" 
          class="map-image" 
        ></image>
  
        <!-- 动态热区标记 -->
        <view 
          v-for="marker in markers" 
          :key="marker.id"
          class="marker" 
          :style="{ top: marker.top, left: marker.left }"
          @tap="showMarkerDetail(marker)"
        >
         <text class="marker-text">{{ marker.title }}</text>
		  <image src="/static/image/loc.png" class="marker-icon"></image>
        </view>
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentMap: 'http://st9hxhc9t.hd-bkt.clouddn.com/3d5a356f-32e4-4b09-8f39-22b3e29a70cd%20%281%29.jfif', // 当前地图图片
	  markers: [
		  { id: 1, title: '标题1', top: '20%', left: '10%' },
		  { id: 2, title: '标题2', top: '21%', left: '10%' },
		  { id: 3, title: '标题3', top: '22%', left: '10%' },
		  { id: 4, title: '标题4', top: '25%', left: '12%' },
		  { id: 5, title: '标题5', top: '20%', left: '10%' },
		]
    };
  },
  methods: {
    formatDate(dateString) {
      // 简单日期格式化示例
      return dateString.replace(/-/g, ".");
    },
	 zoomIn() {
	  this.currentMap = '/static/images/map-hd.jpg'; // 准备更高清图片
	 },
	 showMarkerDetail(){
		 // uni.navigateTo({
		 // 	url:'/pages/index/indexdetail'
		 // })
	 }
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  background: #f5f5f5;
}


/* 地图容器 */
.map-container {
  position: relative;
  flex: 1;
}

/* 地图图片 */
.map-image {
  width: 100%;
  height: 800rpx;
}

/* 标记点样式 */
.marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.marker-icon {
  width: 40rpx;
  height: 40rpx;
}
.marker-text {
  font-size: 24rpx;
  color: #333;
}

</style>